<template>
	<view>
		<view class="box">
			<view class="menu_content_box">
				<view class="pl15 pr15">

					<view class="mt20 area_block_1 pa30">
						<view class="fs30 fwb cor_808">商铺状态</view>
						<view class="mt20 pt35 mb20 flex_box aic">
							<view class="item">
								<view class="fs30 cor_000">商品数量: <text>{{comNum}}</text></view>
							</view>
							<view class="item">
								<view class="fs30 cor_000">店铺访问量: <text>{{cliNum}}</text></view>
							</view>
						</view>
					</view>

					<view class="mt20 area_block_1">

						<view class="flex_box aic pt15 pb15 pl25 pr25 scaley_1">
							<view class="mr15 fs30 cor_000">商铺图标</view>
							<view class="item tar" @tap="uploadFile">
								<image :src="icon" class="img9"></image>
							</view>
							<image src="/static/icon_arrow_6.png" class="vh ml25 img15"></image>
						</view>

						<view class="flex_box aic pt15 pb15 pl25 pr25 scaley_1">
							<view class="mr15 fs30 cor_000">商铺名称
							</view>
							<view class="item tar"><input type="text" class="ipt_01" v-model="name"
									placeholder="请输入商铺名称" placeholder-style="color: ##717171;"></view>

						</view>

						<view class="flex_box aic pt15 pb15 pl25 pr25 scaley_1">
							<view class="mr15 fs30 cor_000">所在区域</view>
							<view class="item tar">
								<view class="sel_area_sty">{{position}}</view>
							</view>
							<view class="ml25 location_btn" @tap="getLocation">定位</view>
							<image src="/static/icon_arrow_6.png" class="vh ml25 img15"></image>
						</view>

						<view class="flex_box aic pt15 pb15 pl25 pr25 scaley_1">
							<view class="mr15 fs30 cor_000">详细地址</view>
							<view class="item tar"><input type="text" class="ipt_01" v-model="address"
									placeholder="请输入详细地址" placeholder-style="color: ##717171;"></view>

						</view>

						<!--            <view class="flex_box aic pt15 pb15 pl25 pr25 scaley_1">
              <view class="mr15 fs30 cor_000">联系方式</view>
              <view class="item tar"><input type="text" class="ipt_01" v-model="phone" placeholder="请输入联系方式" placeholder-style="color: ##717171;"></view>
              <image src="/static/icon_arrow_6.png" class="ml25 img15"></image>             </view> -->

					</view>
					<view class="pt40 df jcfe">
						<view @tap="saveStore" class="preservation_btn_sty">保存</view>
					</view>

				</view>
			</view>
			<view class="flex_box aic">
				<view class="item add_accessories_btn" @tap="addPart">添加配件</view>
				<view class="item view_shop_btn" @tap="toShopPreview">查看商铺</view>
			</view>
		</view><!-- box -->
	</view>
</template>

<script>
	import {
		toast,
		showLoading,
		hideLoading
	} from '@/utils/toast.js';
	import {
		getStoreDetailApi,
		getLocationApi,
		uploadImgApi,
		saveStorePageApi
	} from '@/http/api.js';


	export default {
		data() {
			return {
				userId: uni.getStorageSync('userId'),
				id: '',
				longitude: '',
				latitude: '',
				cityId: '',
				city: '',
				name: '',
				icon: '',
				address: '',
				comNum: 0,
				cliNum: 0,
				position: '',
				isNext: false
			}
		},
		onLoad() {
			console.log(uni.getStorageSync('userId'));
			this.getStoreDetail();
		},
		onBackPress(options) {
		    uni.redirectTo({
		    	url: '/pages/personal_center/personal_center'
		    })
			return true;
		},
		methods: {
			getStoreDetail() {
				let that = this;
				showLoading('加载中');
				getStoreDetailApi({
					userId: this.userId,

				}).then(res => {
					if (res.data) {
						that.storeDetail = res.data;
						that.name = res.data.name;
						that.icon = res.data.icon;
						that.city = res.data.city;
						that.cityId = res.data.cityId;
						that.position = res.data.city;
						that.address = res.data.address;
						that.cliNum = res.data.cliNum;
						that.comNum = res.data.comNum;
						that.id = res.data.id;
						that.latitude = res.data.latitude;
						that.longitude = res.data.longitude;
						that.isNext = true;
					}

					hideLoading();
				}).catch(err => {
					hideLoading();
				})
			},
			uploadFile() {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						showLoading('上传中');
						uploadImgApi({
							file: res.tempFilePaths[0],
							id: 4
						}).then(res => {
							that.icon = res.data;
							hideLoading();
						}).catch(err => {
							hideLoading();
						})
					}
				});
			},
			getLocation() {
				let that = this;
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						that.longitude = res.longitude;
						that.latitude = res.latitude;
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						getLocationApi({
							longitude: res.longitude,
							latitude: res.latitude
						}).then(res => {
							that.cityId = res.data.cityId;
							that.position = res.data.city;
							hideLoading();
						}).catch(err => {
							hideLoading();
						})

					}
				});
			},
			saveStore() {
				if (!this.city && !this.position) {
					toast('必须获取位置');
					return false;
				}
				if (!this.longitude || !this.latitude) {
					toast('请点击定位按钮获取当前位置');
					return false;
				}
				if (!this.name) {
					toast('请填写店铺名称');
					return false;
				}
				if (!this.icon) {
					toast('请上传店铺图片');
					return false;
				}
				if (!this.address) {
					toast('请填写详细地址');
					return false;
				}
				let that = this;
				showLoading('提交中');
				saveStorePageApi({
					userId: this.userId,
					cityId: this.cityId,
					city: this.city ? this.city : this.position,
					name: this.name,
					icon: this.icon,
					longitude: this.longitude,
					latitude: this.latitude,
					address: this.address
				}).then(res => {
					this.id = res.data;
					this.isNext = true;
					toast('信息提交成功！');
					hideLoading();

				}).catch(err => {
					hideLoading();
				})
				// if (this.id) {
				// 	saveStorePageApi({
				// 		id: this.id,
				// 		cityId: this.cityId,
				// 		city: this.city ? this.city : this.position,
				// 		name: this.name,
				// 		icon: this.icon,
				// 		longitude: this.longitude,
				// 		latitude: this.latitude,
				// 		address: this.address
				// 	}).then(res => {
				// 		this.id = res.data;
				// 		this.isNext = true;
				// 		toast('信息提交成功！');
				// 		hideLoading();

				// 	}).catch(err => {
				// 		hideLoading();
				// 	})
				// } else {
				// 	saveStorePageApi({
				// 		userId: this.userId,
				// 		cityId: this.cityId,
				// 		city: this.city ? this.city : this.position,
				// 		name: this.name,
				// 		icon: this.icon,
				// 		longitude: this.longitude,
				// 		latitude: this.latitude,
				// 		address: this.address
				// 	}).then(res => {
				// 		this.id = res.data;
				// 		this.isNext = true;
				// 		toast('信息提交成功！');
				// 		hideLoading();

				// 	}).catch(err => {
				// 		hideLoading();
				// 	})
				// }

			},
			toShopPreview() {
				if (!this.isNext || !this.id) {
					toast('请先编辑保存您的店铺信息后再继续操作！');
					return;
				}
				uni.navigateTo({
					url: '/pages/shop_preview/shop_preview?id=' + this.id + '&type=storeId'
				})
			},
			addPart() {
				if (!this.isNext) {
					toast('请先编辑保存您的店铺信息后再继续操作！');
					return;
				}
				uni.navigateTo({
					url: '/pages/accessories_information_editing/accessories_information_editing?store_id=' + this
						.id +
						'&type=add'
				})
			}
		}
	}
</script>

<style>
	.menu_content_box {
		position: relative;
		height: calc(100vh - 98rpx);
		background-color: #f7f6f6;
	}

	.area_block_1 {
		position: relative;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.ipt_01 {
		display: inline-block;
		width: 100%;
		height: 64rpx;
		line-height: 64rpx;
		text-align: right;
		padding: 0;
		font-size: 28rpx;
		color: #000;
		background-color: transparent;
		border: none;
		border-radius: 0;
		outline: none;
	}

	.sel_area_sty {
		display: inline-block;
		width: 100%;
		height: 64rpx;
		line-height: 64rpx;
		text-align: right;
		font-size: 28rpx;
		color: #000;
		background: transparent;
	}

	.location_btn {
		padding: 0 25rpx;
		height: 64rpx;
		line-height: 64rpx;
		font-size: 28rpx;
		color: #fff;
		background: linear-gradient(90deg, #f44f33, #e10d09);
		border-radius: 10rpx;
	}

	.consult_immediately_btn {
		display: block;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
		color: #fff;
		background: linear-gradient(90deg, #f44f33, #e10d09);
	}

	.add_accessories_btn,
	.view_shop_btn {
		display: block;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		font-size: 34rpx;
		color: #fff;
		font-weight: bold;
	}

	.add_accessories_btn {
		background-color: #343434;
	}

	.view_shop_btn {
		background: linear-gradient(90deg, #f44f33, #e10d09);
	}

	.preservation_btn_sty {
		margin: 0 auto;
		display: block;
		width: 400rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 32rpx;
		color: #fff;
		background: linear-gradient(90deg, #f44f33, #e10d09);
		border-radius: 20rpx;
	}
</style>
